<template>
    <title-box title="发电量">
        <template #extra>
            <ul class="x-title-tabs">
                <li :class="clazz('day')" @click="onClick('day')">
                    <a href="javascript:void(0)">日统计</a>
                </li>
                <li :class="clazz('month')" @click="onClick('month')">
                    <a href="javascript:void(0)">月统计</a>
                </li>
                <li :class="clazz('year')" @click="onClick('year')">
                    <a href="javascript:void(0)">年统计</a>
                </li>
                <li :class="clazz('summary')" @click="onClick('summary')">
                    <a href="javascript:void(0)">总量统计</a>
                </li>
            </ul>
        </template>
        <div class="x-content-inner">
            <div class="time-switch">
                <a-date-picker v-if="statistics !== 'summary'" v-model:value="time" :picker="picker" @change="onDateChange" />
            </div>
            <div ref="chartDom" class="chart" :style="chartStyle"></div>
        </div>
    </title-box>
</template>
<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
import TitleBox from './../TitleBox/index.vue'
import { queryStatistics } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'

const statistics = ref('day')
const time = ref(dayjs())
const GraphicalData = reactive({
    xAxisData: [],
    seriesData: []
})
const chartDom = ref()
let chart = null

const props = defineProps({
    stationId: {
        type: Number
    },
    isStation: {
        type: Boolean,
        default: false
    },
    height: {
        type: Number,
        default: 350
    }
})

const chartStyle = computed(() => {
    return {
        height: props.height + 'px'
    }
})

const clazz = computed(() => {
    return stats => {
        return stats === statistics.value ? 'tab-active' : null
    }
})

const picker = computed(() => {
    if (statistics.value === 'month' || statistics.value === 'year') {
        return statistics.value
    }
    return 'date'
})

const name = computed(() => {
    if (statistics.value === 'month') {
        return '月发电量'
    } else if (statistics.value === 'year') {
        return '年发电量'
    } else if (statistics.value === 'summary') {
        return '总发电量'
    }
    return '日发电量'
})

const options = computed(() => {
    return {
        tooltip: {},
        color: ['#04D488'],
        legend: {
            orient: 'horizontal',
            bottom: '0',
            left: 'center',
            icon: 'circle'
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: GraphicalData.xAxisData
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'KWh',
                axisLine: {
                    show: true, // 是否显示轴线
                    color: '#E6E6E6' // 轴线颜色
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            }
        ],
        series: [
            {
                name: name.value,
                type: statistics.value === 'day' ? 'line' : 'bar',
                smooth: true,
                barWidth: '10',
                data: GraphicalData.seriesData,
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0]
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    }
})

const onClick = stats => {
    statistics.value = stats
    query()
}

const onDateChange = date => {
    time.value = date
    query()
}

const format = () => {
    if (statistics.value === 'year') {
        return time.value.format('YYYY')
    } else if (statistics.value === 'month') {
        return time.value.format('YYYY-MM')
    }
    return time.value.format('YYYY-MM-DD')
}

const queryChart = params => {
    queryStatistics(statistics.value, params).then(result => {
        if (result.code === SUCCESS_CODE) {
            if (result.data && result.data.length > 0) {
                GraphicalData.xAxisData = result.data.map(item => item.reportTime)
                GraphicalData.seriesData = result.data.map(item => item.dp)
                refreshChart()
            } else {
                GraphicalData.xAxisData = []
                GraphicalData.seriesData = []
                refreshChart()
            }
        } else {
            GraphicalData.xAxisData = []
            GraphicalData.seriesData = []
            refreshChart()
        }
    })
}

const query = () => {
    if (!props.isStation) {
        queryChart({ time: format() })
    } else {
        if (props.stationId) {
            queryChart({ time: format(), stationId: props.stationId })
        }
    }
}

onMounted(() => {
    chart = echarts.init(chartDom.value)
})

const refreshChart = () => {
    chart && chart.setOption(options.value)
}

watch(
    () => props.stationId,
    () => {
        query()
    }
)

query()
</script>
